<script lang="ts" setup>
import type { DressResourceApi } from '#/api/wedding/dressresource';

import { ref, watch, computed } from 'vue';

import { IconifyIcon } from '@vben/icons';
import { Card, Select, Input, Radio, Button, Space, Divider } from 'ant-design-vue';

interface Props {
  value?: DressResourceApi.MobileThemeConfig;
}

const props = withDefaults(defineProps<Props>(), {
  value: () => ({}),
});

const emit = defineEmits<{
  (e: 'update:value', value: DressResourceApi.MobileThemeConfig): void;
  (e: 'change', value: DressResourceApi.MobileThemeConfig): void;
}>();

defineOptions({ name: 'ThemeConfigEditor' });

const themeConfig = ref<DressResourceApi.MobileThemeConfig>({
  type: 'modern',
  primaryColor: '#ff1493',
  secondaryColor: '#ff69b4',
  headerStyle: 'elegant',
  cardStyle: 'shadow',
  ...props.value,
});

// 预设主题
const presetThemes = [
  {
    type: 'chinese',
    label: '中式风格',
    description: '中国传统婚礼风格，红色为主',
    icon: 'lucide:chinese-yuan',
    config: {
      type: 'chinese' as const,
      primaryColor: '#dc143c',
      secondaryColor: '#ffd700',
      headerStyle: 'classic' as const,
      cardStyle: 'border' as const,
    },
  },
  {
    type: 'european',
    label: '欧式风格',
    description: '欧洲宫廷风格，典雅华贵',
    icon: 'lucide:castle',
    config: {
      type: 'european' as const,
      primaryColor: '#800080',
      secondaryColor: '#ffd700',
      headerStyle: 'elegant' as const,
      cardStyle: 'gradient' as const,
    },
  },
  {
    type: 'modern',
    label: '现代简约',
    description: '现代简约风格，清新时尚',
    icon: 'lucide:sparkles',
    config: {
      type: 'modern' as const,
      primaryColor: '#ff1493',
      secondaryColor: '#ff69b4',
      headerStyle: 'simple' as const,
      cardStyle: 'shadow' as const,
    },
  },
  {
    type: 'vintage',
    label: '复古风格',
    description: '复古怀旧风格，优雅浪漫',
    icon: 'lucide:flower-2',
    config: {
      type: 'vintage' as const,
      primaryColor: '#8b4513',
      secondaryColor: '#daa520',
      headerStyle: 'classic' as const,
      cardStyle: 'border' as const,
    },
  },
  {
    type: 'bohemian',
    label: '波西米亚',
    description: '自由奔放风格，自然清新',
    icon: 'lucide:leaf',
    config: {
      type: 'bohemian' as const,
      primaryColor: '#228b22',
      secondaryColor: '#98fb98',
      headerStyle: 'simple' as const,
      cardStyle: 'shadow' as const,
    },
  },
];

// 应用预设主题
function applyPresetTheme(preset: typeof presetThemes[0]) {
  themeConfig.value = {
    ...themeConfig.value,
    ...preset.config,
  };
  emitChange();
}

// 监听变化并触发事件
watch(
  themeConfig,
  (newValue) => {
    emitChange();
  },
  { deep: true },
);

function emitChange() {
  emit('update:value', themeConfig.value);
  emit('change', themeConfig.value);
}

// 重置为默认
function resetToDefault() {
  themeConfig.value = {
    type: 'modern',
    primaryColor: '#ff1493',
    secondaryColor: '#ff69b4',
    headerStyle: 'elegant',
    cardStyle: 'shadow',
  };
}

// 当前主题预览样式
const previewStyle = computed(() => ({
  background: `linear-gradient(135deg, ${themeConfig.value.primaryColor || '#ff1493'}, ${themeConfig.value.secondaryColor || '#ff69b4'})`,
}));
</script>

<template>
  <div class="theme-config-editor">
    <!-- 预设主题 -->
    <Card title="预设主题" size="small" class="mb-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        <div
          v-for="preset in presetThemes"
          :key="preset.type"
          class="theme-preset-card p-3 border rounded-lg cursor-pointer transition-all hover:shadow-md"
          :class="{ 'border-primary bg-primary/5': themeConfig.type === preset.type }"
          @click="applyPresetTheme(preset)"
        >
          <div class="flex items-start gap-3">
            <div class="text-3xl">
              <IconifyIcon :icon="preset.icon" />
            </div>
            <div class="flex-1">
              <div class="font-semibold">{{ preset.label }}</div>
              <div class="text-xs text-gray-500 mt-1">{{ preset.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </Card>

    <!-- 自定义配置 -->
    <Card title="自定义配置" size="small" class="mb-4">
      <div class="space-y-4">
        <!-- 主题类型 -->
        <div>
          <div class="text-sm font-medium mb-2">主题类型</div>
          <Select
            v-model:value="themeConfig.type"
            class="w-full"
            placeholder="选择主题类型"
          >
            <Select.Option value="chinese">中式风格</Select.Option>
            <Select.Option value="european">欧式风格</Select.Option>
            <Select.Option value="modern">现代简约</Select.Option>
            <Select.Option value="vintage">复古风格</Select.Option>
            <Select.Option value="bohemian">波西米亚</Select.Option>
            <Select.Option value="custom">自定义</Select.Option>
          </Select>
        </div>

        <!-- 颜色配置 -->
        <div class="grid grid-cols-2 gap-4">
          <div>
            <div class="text-sm font-medium mb-2">主色调</div>
            <div class="flex items-center gap-2">
              <input
                v-model="themeConfig.primaryColor"
                type="color"
                class="w-20 h-10 border rounded cursor-pointer"
              />
              <Input
                v-model:value="themeConfig.primaryColor"
                placeholder="#ff1493"
                class="flex-1"
              />
            </div>
            <div class="mt-2 flex flex-wrap gap-2">
              <div
                v-for="color in ['#dc143c', '#ff1493', '#800080', '#228b22', '#8b4513']"
                :key="color"
                class="w-8 h-8 rounded cursor-pointer border-2 hover:scale-110 transition-transform"
                :style="{ backgroundColor: color, borderColor: themeConfig.primaryColor === color ? '#000' : 'transparent' }"
                @click="themeConfig.primaryColor = color"
              />
            </div>
          </div>
          <div>
            <div class="text-sm font-medium mb-2">辅助色</div>
            <div class="flex items-center gap-2">
              <input
                v-model="themeConfig.secondaryColor"
                type="color"
                class="w-20 h-10 border rounded cursor-pointer"
              />
              <Input
                v-model:value="themeConfig.secondaryColor"
                placeholder="#ff69b4"
                class="flex-1"
              />
            </div>
            <div class="mt-2 flex flex-wrap gap-2">
              <div
                v-for="color in ['#ffd700', '#ff69b4', '#daa520', '#98fb98', '#87ceeb']"
                :key="color"
                class="w-8 h-8 rounded cursor-pointer border-2 hover:scale-110 transition-transform"
                :style="{ backgroundColor: color, borderColor: themeConfig.secondaryColor === color ? '#000' : 'transparent' }"
                @click="themeConfig.secondaryColor = color"
              />
            </div>
          </div>
        </div>

        <Divider />

        <!-- 样式配置 -->
        <div>
          <div class="text-sm font-medium mb-2">头部样式</div>
          <Radio.Group v-model:value="themeConfig.headerStyle" button-style="solid">
            <Radio.Button value="classic">经典</Radio.Button>
            <Radio.Button value="elegant">优雅</Radio.Button>
            <Radio.Button value="simple">简约</Radio.Button>
          </Radio.Group>
        </div>

        <div>
          <div class="text-sm font-medium mb-2">卡片样式</div>
          <Radio.Group v-model:value="themeConfig.cardStyle" button-style="solid">
            <Radio.Button value="shadow">阴影</Radio.Button>
            <Radio.Button value="border">边框</Radio.Button>
            <Radio.Button value="gradient">渐变</Radio.Button>
          </Radio.Group>
        </div>

        <Divider />

        <!-- 高级配置 -->
        <div>
          <div class="text-sm font-medium mb-2">背景图片URL（可选）</div>
          <Input
            v-model:value="themeConfig.backgroundImage"
            placeholder="https://example.com/background.jpg"
          />
        </div>

        <div>
          <div class="text-sm font-medium mb-2">自定义CSS（可选）</div>
          <Input.TextArea
            v-model:value="themeConfig.customCss"
            :rows="4"
            placeholder="输入自定义CSS样式..."
          />
        </div>
      </div>
    </Card>

    <!-- 主题预览 -->
    <Card title="主题预览" size="small">
      <div class="preview-container">
        <div class="preview-mobile">
          <!-- 模拟移动端预览 -->
          <div class="preview-header" :style="previewStyle">
            <div class="text-white text-center py-6">
              <h1 class="text-2xl font-bold mb-2">婚纱精选</h1>
              <p class="text-sm opacity-90">{{ presetThemes.find(t => t.type === themeConfig.type)?.label || '自定义主题' }}</p>
            </div>
          </div>
          <div class="preview-content p-4 bg-gray-50">
            <div
              class="preview-card bg-white rounded-lg overflow-hidden"
              :class="{
                'shadow-md': themeConfig.cardStyle === 'shadow',
                'border-2': themeConfig.cardStyle === 'border',
                'bg-gradient-to-br from-white to-gray-100': themeConfig.cardStyle === 'gradient',
              }"
              :style="{ borderColor: themeConfig.cardStyle === 'border' ? themeConfig.primaryColor : undefined }"
            >
              <div class="aspect-[3/4] bg-gray-200 flex items-center justify-center">
                <IconifyIcon icon="lucide:image" class="text-6xl text-gray-400" />
              </div>
              <div class="p-3">
                <h3 class="font-semibold mb-2">婚纱示例</h3>
                <div class="text-sm text-gray-600 mb-2">品牌 · 颜色 · 尺码</div>
                <div class="text-xl font-bold" :style="{ color: themeConfig.primaryColor }">¥888/天</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-4 text-center">
        <Space>
          <Button @click="resetToDefault">
            <template #icon>
              <IconifyIcon icon="lucide:rotate-ccw" />
            </template>
            重置为默认
          </Button>
        </Space>
      </div>
    </Card>
  </div>
</template>

<style scoped>
.theme-preset-card {
  transition: all 0.3s ease;
}

.theme-preset-card:hover {
  transform: translateY(-2px);
}

.preview-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.preview-mobile {
  width: 320px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.preview-header {
  transition: all 0.3s ease;
}

.preview-card {
  transition: all 0.3s ease;
}
</style>

